import { useState, useContext } from 'react';
import type { DrawerProps, RadioChangeEvent } from 'antd';
import { Button, Drawer, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { AllContext, AllContextProvider } from '@src/Common/AllContext';
import { http_request } from '@src/Common/Request';
import AddDevice from './AddDevice';

export default () => {
    const { title, tabKey, devType, group, messageApi } = useContext(AllContext);
    const [open, setOpen] = useState(false);
    const [placement, setPlacement] = useState<DrawerProps['placement']>('left');
    const baseContext = useContext(AllContext);
    const addDrawerTitle = '添加设备';

    let titleBackup = 'AP';
    if (tabKey === 'router') {
        titleBackup = 'Router';
    }

    const showDrawer = () => {
        setOpen(true);
    };

    const getDevicesFromUnbindList = () => {
        //TODO get devices list from unbind list
    };

    const onClose = () => {
        setOpen(false);
    };

    const onChange = (e: RadioChangeEvent) => {
        setPlacement(e.target.value);
    };


    const newAllContext = { ...baseContext, closeDrawer: onClose};

    return (
        <>
            <Space>
                <a
                    onClick={() => {
                        showDrawer();
                        getDevicesFromUnbindList();
                    }}
                >
                    {addDrawerTitle}
                </a>
            </Space>
            <Drawer
                title={`${addDrawerTitle} (${titleBackup})`}
                placement={'left'}
                closable={false}
                onClose={onClose}
                open={open}
                key={placement}
                width={'70%'}
                destroyOnClose
                className='.ant-drawer-header'
            >
                <AllContextProvider value={newAllContext}>
                    <AddDevice />
                </AllContextProvider>
            </Drawer>
        </>
    );
};